import { TagList } from '@entities/Tags'
import { ResponseTask, TaskCard, TaskCardsList } from '@entities/Tasks'
import { useTags } from '@features/EditTaskForm'
import { useGetTasksQuery } from '@shared/api'
import { Panel } from '@shared/ui/Panel'
import { Title } from '@shared/ui/Title'
import { memo } from 'react'
import { Link } from 'react-router-dom'
import styles from './DashboardTaskList.module.scss'

export const DashboardTaskList = memo(() => {
  const { data, isLoading: tasksLoading } = useGetTasksQuery()
  const tasks = data?.slice(0, 3)
  const { getTags } = useTags()
  return (
    <Panel className={styles['tasks-wrapper']} withShadow withoutHover>
      <Title tag='h5'>Личные задачи</Title>

      <TaskCardsList
        isLoading={tasksLoading}
        renderTask={(task: ResponseTask) => (
          <TaskCard
            key={task.id}
            renderTags={(task) => <TagList tagList={getTags(task?.tagsIds)} />}
            task={task}
            view={'format_list_bulleted'}
          />
        )}
        tasks={tasks}
        view={'format_list_bulleted'}
      />
      <Link className={styles.link} to={'/tasks'}>
        Посмотреть все
        <span className='material-symbols-rounded'>arrow_forward</span>
      </Link>
    </Panel>
  )
})
DashboardTaskList.displayName = 'DashboardTaskList'
